<template>
	<view class="page-container">
		<view class="tab-bar" v-if="orderDetail.status == 0">
			<view class="tab-bar__placeholder">
				<view>
					<view class="tab-bar__placeholder_title">等待买家付款</view>
					<view class="tab-bar__placeholder_countdown">
						<text>
							剩余
						</text><u-count-down :time="countDownTime" format="mm:ss"></u-count-down><text>
							，超时后订单自动关闭
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page-content">
			<view class="order-address" v-show="type == 0">
				<image src="/static/icon/location.png" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
				<view>
					<view><text>{{ orderDetail.takeName }}</text> {{ orderDetail.takePhone }}</view>
					<view>{{ orderDetail.takeAddress }}</view>
				</view>
			</view>
			<view class="order-detail">
				<block v-for="(item, index) in orderDetail.orderProductDTOList" :key="index">
					<view class="orderDetail-item" >
						<view class="orderDetail-item-img">
							<image :src="item.thumbnail" lazy-load="true" />
						</view>
						<view class="orderDetail-item-text">
							<view>{{ item.name }}</view>
							<view v-if="item.specsName == ''">{{ item.specsName }}</view>
						</view>
						<view class="orderDetail-item-price">
							<view>￥<text>{{ item.singlePrice }}</text></view>
							<text>×{{ item.number }}</text>
						</view>
					</view>
				</block>
				<view class="order-all">
					<view>
						<view>订单合计：</view>
						<view>￥<text>{{ orderDetail.totalPrice }}</text></view>
					</view>
					<view>
						<view>运费：</view>
						<view>￥<text>{{ orderDetail.freight }}</text></view>
					</view>
					<view>
						<view>备注：</view>
						<view>{{ orderDetail.remark == null ? '' : orderDetail.remark }}</view>
					</view>
				</view>
				<view class="order-sum">
					<text>合计￥</text>
					<text>{{ orderDetail.realityPrice }}</text>
				</view>
				<view class="order-number">
					<view>
						<view>订单单号：</view>
						<view>{{ orderDetail.orderNo }}</view>
					</view>
					<view>
						<view>创建时间:</view>
						<view>{{ orderDetail.createTime }}</view>
					</view>
					<view>
						<view>订单状态:</view>
						<view>{{ orderDetail.orderStatus }}</view>
					</view>
					<view v-if="type == 1">
						<view>取货人:</view>
						<view>{{ orderDetail.takeName == null ? '暂无' : orderDetail.takeName }}</view>
					</view>
					<view v-if="type == 1">
						<view>取货人手机号:</view>
						<view>{{ orderDetail.takePhone == null ? '暂无' : orderDetail.takePhone }}</view>
					</view>
					<view v-if="type == 1">
						<view>取货时间:</view>
						<view>{{ orderDetail.takedTime == null ? orderDetail.takeTime : orderDetail.takedTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<footer v-if="orderDetail.status == 0">
			<view class="order-btns">
				<view>
					<view class="cancel-orderBtn" @click="onCancelOrder(orderDetail.id)">
						<u-icon name="backspace" size="20" color="#999999" />
						<view>取消订单</view>
					</view>
					<view class="now-pay" @click="buyItNow">立即支付</view>
				</view>
			</view>
		</footer>
		<uni-popup ref="needPayPopup" style="height: 100%;width: 650rpx;">
			<view class='modal-confirm'>
				<view @click.stop>
					<view class='modal-confirm-section'>
						<view class='pay-type'>
							<u-radio-group v-model="needPayType" placement="column">
								<u-radio :name="2" activeColor="#32B499" :customStyle="{ marginBottom: '12px' }">
									<view class='pay-type-cont'>
										<image
											src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/973a7651-00ae-4dc0-8b73-78952c0694f9.png"
											alt="" mode='aspectFit|aspectFill|widthFix' />
										<view>支付宝</view>
									</view>
								</u-radio>

								<u-radio :name="1" activeColor="#32B499">
									<view class='pay-type-cont'>
										<image
											src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/49eb0d0e-e41b-4b0d-80d8-dadaba15d396.png"
											alt="" mode='aspectFit|aspectFill|widthFix' />
										<view>微信支付</view>
									</view>
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class='modal-confirm-footer'>
						<view @click="handleCancel()">取消</view>
						<view @click="handleOk()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderDetail: {}, // 后台返回的原始数据
				countDownTime: null, //倒计时
				backRefresh: false, // 用于接收其他页面back时的状态
				orderId: '',
				needPayType: 1,
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.type = option.type
		},

		onShow() {
			this.getOrderDetail();
		},
		methods: {
			async getOrderDetail() {
				const {
					orderId,
					type
				} = this;
				uni.showLoading({
					title: '加载中'
				});
				let result = await this.$request.miniOrderDetail({
					orderId
				})
				uni.hideLoading();
				const {
					data
				} = result;
				console.log(data)

				if (data.status == 0) data.orderStatus = '订单即将关闭，建议尽快付款';
				if (data.status == 1) data.orderStatus = '订单已取消';

				if (data.status == 2 && data.logisticsStatus == 0) data.orderStatus = '商家还没有发货，请耐心等待';
				if (data.status == 2 && data.logisticsStatus == 0 && type == 1) data.orderStatus = '商家还未配货，请耐心等待';

				if (data.status == 2 && data.logisticsStatus == 1) data.orderStatus = '订单已发货，请注意查看物流';
				if (data.status == 2 && data.logisticsStatus == 1 && type == 1) data.orderStatus = '商家已配货完成，请尽快取货';

				if (data.status == 2 && data.logisticsStatus == 2 && data.refundStatus == 0 && data.evaluateStatus == 0) {
					data.orderStatus = '您的商品已确认收货，您还没有评价';
				}
				if (data.status == 2 && data.logisticsStatus == 3) data.orderStatus = '您的商品正在退货中';
				if (data.status == 3 && data.refundStatus == 1) data.orderStatus = '您的订单正在退货中';
				if (data.status == 3 && data.logisticsStatus == 0 && data.refundStatus == 2) data.orderStatus = '退款成功';
				if (data.status == 3 && data.logisticsStatus == 4) data.orderStatus = '退货成功';
				if (data.status == 4 && data.refundStatus == 2) data.orderStatus = '退货成功，订单已完成';
				if (data.status == 4 && data.refundStatus == 3) data.orderStatus = '退款失败';
				if (data.status == 4 && data.refundStatus == 4) data.orderStatus = '已取消退款';
				if (data.status == 4 && data.logisticsStatus == 2 && data.refundStatus == 0 && data.evaluateStatus != 0) data
					.orderStatus = '订单已完成';
				this.orderDetail = result.data
				this.computeCountDownTime(result.data);
			},
			async computeCountDownTime(orderDetail) {
				if (orderDetail.status == 0) {
					const nowTime = new Date().getTime() / 1000;
					const endTime = new Date(orderDetail.createTime).getTime() / 1000 + 30 * 60;
					this.countDownTime = Math.floor(endTime - nowTime) > 0 ? Math.floor(endTime - nowTime) * 1000 : 0
				}
			},
			//取消订单
			onCancelOrder(orderId) {
				this.$goPath(2, `/pages/premiumBag/mine/cancelOrder?orderId=${orderId}`)
			},
			handleCancel() {
				this.$refs.needPayPopup.close();
			},
			handleOk() {
				const {
					orderDetail,
					needPayType
				} = this;
				this.$toast('加载中', 2000, 'loading')
				// #ifdef H5
				this.$toast('请前往APP/小程序支付！')
				this.$refs.needPayPopup.close();
				// #endif
				// #ifdef APP-PLUS  
				const param = {
					id: orderDetail.id,
					paidWay: needPayType,
				}
				this.$request.miniOrderPay(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						if (needPayType == 2) {
							const paymentData = res.data;
							let reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
							plus.runtime.openURL(encodeURI(paymentData.match(reg)[0]));
							this.$refs.needPayPopup.close();
							this.$goPath(1)
						} else {
							//余额不足需要跳转微信支付
							let paymentData = JSON.parse(res.data);
							plus.share.getServices(service => {
								let weixin = service.find(i => i.id === 'weixin')
								if (weixin) {
									weixin.launchMiniProgram({
										id: "gh_f3a8a1c4d7cf",
										path: `/pages/payIndex/payIndex?rc_result=${JSON.stringify(paymentData)}`,
										type: 0,
										webUrl: ''
									}, res => {
										this.$refs.needPayPopup.close();
										this.$goPath(1)
									}, err => {
										this.$refs.needPayPopup.close();
										this.$goPath(1)
									})
								} else {
									// 没有获取到微信分享服务
									console.log('没有获取到微信分享服务');
								}
							}, err => {
								// 获取分享服务列表失败
								console.log(err);
							})
						}
					} else {
						this.$toast('支付失败')
					}
				});
				// #endif

			},
			//立即购买 
			buyItNow() {
				// #ifndef MP-WEIXIN
				this.$refs.needPayPopup.open('center');
				// #endif
				// #ifdef MP-WEIXIN
				const {
					orderDetail
				} = this;
				this.$request.miniOrderPay({
					id: orderDetail.id
				}).then(res => {
					const data = JSON.parse(res.data);
					const {
						timeStamp,
						nonceStr,
						signType,
						paySign
					} = data;
					uni.requestPayment({
						timeStamp,
						nonceStr,
						package: data.package,
						signType,
						paySign,
						success: function(request) {
							// 支付成功
							this.$toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/premiumBag/goods/paySuccess?orderId=${orderDetail.id}`,
								});
							}, 10)
						},
						fail: function(error) {
							// 支付失败
							this.$toast('支付失败')
						}
					})
				});
				// #endif
			},

			//跳转商品详情
			goGoodsDetail(item) {
				const {
					type,
					orderDetail
				} = this;
				let orderType = type == 0 ? 1 : 2;
				this.$goPath(2,
					`/pages/goods/details/index?productId=${item.productUpId}&type=${orderType}&storeId=${orderDetail.storeId}`)
			},

		},
	}
</script>
<style scoped>
	:host {
		background-color: #f5f5f5;
	}

	.page-container {
		height: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
	}

	.page-container .tab-bar__placeholder {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #333;
		padding: 24rpx;
	}

	.page-container .tab-bar__placeholder>view {
		background-color: #32B499;
		color: #fff;
		width: 700rpx;
		height: 200rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-bar__placeholder_title {
		font-size: 44rpx;
		font-weight: bold;
	}

	.tab-bar__placeholder_countdown {
		display: flex;
		align-items: center;
	}

	.count-down,
	.t-count-down--default {
		display: inline;
		font-size: 24rpx !important;
		color: #fff !important;
	}

	.page-content {
		flex: 1;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.order-address {
		background: #fff;
		display: flex;
		justify-content: flex-start;
		border-radius: 16rpx 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.order-address>image {
		width: 48rpx;
		height: 48rpx;
		box-sizing: border-box;
		margin-right: 15rpx;
	}

	.order-address>view {
		flex: 1;
		font-size: 24rpx;
		color: #666;
	}

	.order-address>view text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 33rpx;
	}

	.order-detail {
		margin-top: 24rpx;
		color: #999999;
		font-size: 28rpx;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 16rpx 16rpx;
		background-color: #fff;
		margin-bottom: 260rpx;
	}

	.orderDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}

	.orderDetail-item-img {
		width: 128rpx;
		height: 128rpx;
	}

	.orderDetail-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx 10rpx;
		display: block;
	}

	.orderDetail-item-text {
		width: 372rpx;
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}

	.orderDetail-item-text>view:first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
	}

	.orderDetail-item-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.orderDetail-item-price>view {
		color: #333;
	}

	.orderDetail-item-price>view>text {
		font-size: 32rpx;
	}

	.orderDetail-item-price>text {
		font-size: 24rpx;
	}

	.order-all {
		border-top: 2rpx solid rgba(241, 241, 241, 0.8);
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
		padding: 24rpx 0 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}

	.order-all>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.order-all>view>view:last-child {
		color: #EA5F5F;
	}

	.order-all>view>view:last-child>text {
		font-size: 32rpx;
	}

	.order-sum {
		padding: 24rpx 0;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #333333;
		box-sizing: border-box;
	}

	.order-sum>text:last-child {
		font-size: 40rpx;
		color: #EA5F5F;
		font-weight: bold;
	}

	.order-number {
		padding: 24rpx 0 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}

	.order-number>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.order-btns {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row-reverse;
		justify-self: flex-start;
	}

	.order-btns>view {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.order-btns>view>view {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order-btns>view .cancel-orderBtn {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.now-pay {
		width: 440rpx;
		height: 80rpx;
		background: #32B499;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.modal-confirm {
		width: 650rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		height: auto;
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
	}

	.modal-confirm-section {
		padding: 20px 30px;
		border-bottom: 1px solid rgba(241, 241, 241, 0.8);

	}

	.modal-confirm-section>.needPay-money {
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EA5F5F;
		font-family: 'PingFang SC-Bold';
	}

	.modal-confirm-section>.toast-pay {
		margin-bottom: 12px;
		text-align: center;
		font-size: 12px;
		color: #999999;
	}

	.modal-confirm-section>view text {
		font-size: 20px;
		font-family: 'DIN-Bold';
	}

	.modal-confirm-section .pay-line {
		width: 100%;
		height: auto;
		display: block;
		margin: 12px 0;
	}

	.modal-confirm-section>.pay-type .pay-type-cont {
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-left: 6px;
	}

	.modal-confirm-section>.pay-type .pay-type-cont>image {
		width: 24px;
		height: 24px;
		display: block;
		margin-right: 12px;
	}

	.modal-confirm-footer {
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.modal-confirm-footer>view {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-confirm-footer>view:last-child {
		border-left: 1px solid rgba(241, 241, 241, 0.8);
		color: #32B499;
	}

	footer {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(51, 51, 51, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>